<template>
	<CommonCard title="今日销售额" :value="numberFormat(salesToday)">
		<template #default>
			<div class="compare">
				<div>
					<span class="emphasis"
						>日同比 &nbsp;{{ numberFormat(salesGrowthLastDay) }}%</span
					><span class="decrement"></span>
				</div>
				<div>
					<span class="emphasis"
						>日同比 &nbsp;{{ numberFormat(salesGrowthLastMonth) }}%</span
					><span class="increment"></span>
				</div>
			</div>
		</template>
		<template #footer>
			<div>
				昨日销售额
				<span class="emphasis">{{ moneyFormat(salesLastDay) }}</span>
			</div>
		</template>
	</CommonCard>
</template>

<script lang="ts">
export default {
	name: 'TodaySales',
}
</script>

<script lang="ts" setup>
import useFormat from '@/hooks/useFormat'
import { useReportDataStore } from '@/stores/reportData'
import { computed } from 'vue'
import CommonCard from './CommonCard.vue'

const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = useFormat()

// 获取今日销售额
const salesToday = computed(() => reportDataStore.reportData.salesToday)
// 昨日销售额
const salesLastDay = computed(() => reportDataStore.reportData.salesLastDay)
// 日同比
const salesGrowthLastDay = computed(
	() => reportDataStore.reportData.salesGrowthLastDay
)
// 月同比
const salesGrowthLastMonth = computed(
	() => reportDataStore.reportData.salesGrowthLastMonth
)
</script>

<style lang="scss" scoped>
.compare {
	div {
		height: 24px;
	}
}
</style>
